<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>article</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: PingFang SC;
      font-size: 0.24rem;
    }

    #app {
      width: 100%;
      background: rgba(248, 248, 248, 1);
    }

    /* @font-face{
      font-family: PingFang SC;
      src: url('./font/FZ.TTF'),
           url('./font/IMPACT.TTF');
    } */
    body {
      width: 100vw;
      min-height: 100vh;
      background: rgba(248, 248, 248, 1);
      -webkit-overflow-scrolling: touch;
    }

    img {
      vertical-align: middle;
    }

    li {
      list-style: none;
    }

    .no {
      display: none;
    }

    ::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    input {
      background: none;
      outline: none;
      border: none;
    }

    [v-cloak] {
      display: none;
    }
  </style>
  <!-- <link rel="stylesheet" href="https://static.77du.net/template/ciff/news/css/style.css" /> -->
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
</head>

<body>
  <div id="app" style="display: none;">
    <header class="article">
      <!-- 顶部主图 -->
      <img src="https://cn.vuejs.org/images/logo.png" alt="" />

      <section class="article-center">
        <!-- 标题 -->
        <p>ART探展，云上体验上新的乐趣</p>
        <!-- 新闻类别类别 -->
        <p>
          <img :src="static+'/img/wenzhang.png'" alt="文章" />
          <span>文章·新品前瞻</span>
        </p>
        <!-- 文章顶线 -->
        <span class="topbr"></span>

        <!-- //富文本内容区域 -->
        <article class="contain_article">
          <div class="title">
            <span>优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是</span>
          </div>
          <div class="first_img">
            <img src="https://cn.vuejs.org/images/logo.png" alt="">
          </div>
          <div class="center_text">
            <span>
              优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀。
            </span>
          </div>
          <div class="sencond_img">
            <img src="https://cn.vuejs.org/images/logo.png" alt="">
          </div>
          <div class="bottom_text">
            <span>
              优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是永葆青春的秘诀优雅的少女心是
            </span>
          </div>
        </article>
        <div style="padding: 0 0.36rem;">
          <span style="color:#7a7a7a;font-size: 0.24rem;">
            对于通过本网发布的作品，本网受著作权人委托，在此声明禁止任何媒体、网站或个人在未经书面授权的情况下违法转载或使用。
          </span>
        </div>
        <!-- 文章底线 -->
        <div class="endbr">
          <span></span>
          <div>END</div>
          <span></span>
        </div>
      </section>

      <!-- 文章评论预览 -->
      <div class="article-re" @click="openList">
        <div class="discuss">
          <div v-for="(item, index) in previewList" :key="index">
            <span>{{ item.userName }}:</span>
            <span>{{ item.intro }}</span>
          </div>
          <input @click.stop="openReallyInput" type="text" value='说点什么...' readonly="readonly" class="bottom_zhanshi" />
        </div>
      </div>
    </header>
    <!-- 底部推荐列表 -->
    <footer class="recommend">
      <p>相关文章推荐</p>
      <ul>
        <li v-for="(item, index) in list" :key="index" @click='jump(item)'>
          <img :src="item.covers[0].fileUrl || ''" alt="" class="lgimg" />
          <div>
            <p>{{item.title}}</p>
            <p class="bottom_icon">
              <img :src='item.category.icon' style="width:0.3rem;margin-right:0.08rem;vertical-align: bottom;" />
              <span>{{item.category.name}}</span>
            </p>
          </div>
        </li>
      </ul>

      <div style="height: 1.4rem;"></div>
    </footer>
    <!-- 底部输入框 -->
    <div class="evaluate">
      <div>
        <input type="text" placeholder="说点什么吧。。。" readonly="readonly" @click="clearState" />
      </div>
      <div>
        <img :src="like[likeIndex]" alt="" @click='likeArtice' />
        <span>123</span>
      </div>
      <div>
        <img :src="static+'/img/pinglunk.png'" alt="" @click="listSwitch=true" />
        <span>12</span>
      </div>
    </div>

    <!-- 真正的输入框 -->
    <transition name="fade">
      <div class="really-in" v-show="really" @touchmove.prevent @click.stop="really=false">
        <div @click.stop>
          <img :src="static+'/img/pic.png'" alt="" />
          <input v-model="text" type="text" :placeholder="replay===''?'说点什么?':replay" v-focus ref='reallyInput'
            @focus='recordHieght' @blur='recoverHieght' />
          <span @click="submite" class="sendmsg">发送</span>
        </div>
      </div>
    </transition>

    <!-- 评论展开列表 -->
    <section :class="listSwitch===true?'writer_list showcontant':'writer_list'" @click="listSwitch=false"
      @touchmove.self.prevent>
      <div :class="listSwitch===true?'list_contain showcomlist':'list_contain'" @click.stop>
        <p class="list_title">
          <span>评论</span>
          <span>{{5}}</span>
        </p>
        <div style="height: 1rem;background-color: #fff;"></div>
        <!-- 列表主体 -->
        <div class="list_contain_box" id="list" @scroll.passive='onScroll'>
          <div class="listData" v-for="(item, index) in 5" :key="index">
            <img src="" class="header" />

            <div class="right_con border_f">
              <!-- 时间和人 -->
              <div class="person">
                <div class="person_title">
                  <span class="person_title_f">路人甲</span>
                  <img :src="static+'/img/aixin_k.png'" class="dianzan" />
                </div>
                <div class="dz">
                  <span class="person_title_l">刚刚</span>
                  <span>5</text>
                </div>
              </div>
              <!-- 评论列表 -->
              <div class="list_cen">
                <!-- 第一层回复 -->
                <div class="list_cen_fir">
                  <span class="list_cen_fir_text" v-if="imgOrText">这个沙发看起来很舒服~</span>
                  <img src="" class="list_cen_fir_img" v-if="!imgOrText" />
                  <div class="hasReplay" @click.self.stop="jumpReplayPage(item)" v-if="item.replyCount != 0">共{{item.replyCount}}条回复></div>
                </div>

                <!-- //还有回复 -->
                <div class="list_cen_sec">
                  <img src="" mode="" class="list_cen_sec_header" />
                  <div class="list_cen_sec_right">
                    <span class="list_cen_sec_right_text">路人甲</span>
                    <div class="list_cen_sec_right_bo">
                      <div class="list_cen_sec_right_box">
                        <span class="list_cen_sec_right_bo_text">品牌官网可以买啦！</span>
                        <span>04-25</span>
                      </div>
                      <img :src="static+'/img/aixin_k.png'" class="dianzan" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!-- 底部数据为空提示 -->
          <div class="floor" v-if='hasChart'>
            <div></div>
            <span>没有更多了</span>
            <div></div>
          </div>

          <div style="height: 1rem;width: 100%;background-color: #fff;"></div>
        </div>
        <div class="bottom_inp" @click.stop='closeModel' :class="start == true ? 'inputmask' : ''">
          <div>
            <img src="../static/img/pic.png" v-show="start" />
            <input type="text" :placeholder="hold || '说点什么'" @focus="startinput" @blur="start = false"
              :style="start == true ? 'width:4.9rem' : 'width:5.64rem'" v-model="text" />
            <span>发送</span>
          </div>
        </div>
      </div>
    </section>
    <img :src="'https://static.77du.net/template/ciff/img/hartgif.gif?id='+Math.random()" alt="" v-if="showLIkeGif"
      class="showLikeGift">


    <div class="Toast" v-show='toast'>{{toasttitle}}</div>
  </div>
</body>
<script>
  (function () {
    let doc = document.documentElement,
      resizeEvt =
        "orientationchange" in window ? "orientationchange" : "resize";
    function changeFontSize() {
      let clientWidth = doc.offsetWidth,
        scale = clientWidth / 750;
      doc.style.fontSize = scale * 100 + "px";
    }
    if (!doc.addEventListener) return;
    window.addEventListener(resizeEvt, changeFontSize); // 监听窗口变化或横屏时
    document.addEventListener("DOMContentLoaded", changeFontSize);
  })();
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="./js/jq.js"></script>
<script src="./js/article.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

</html>